<template>
  <title-container
    v-if="question"
    :id="question.outId"
    :index="index"
    :total="total"
    :error="error"
    :question="question"
  >
    <div
      v-for="(item, index) in question.questionContent"
      :key="index"
    >
      <div
        class="item"
        @click="onChange(item, index)"
      >
        <input
          v-if="item.checked"
          v-model="item.sort"
          class="active"
          disabled="disabled"
        />
        <span v-else class="box"></span>
        <span class="content">{{ item.content }}</span>
      </div>

      <a-textarea
        v-if="item.isBlank && item.checked"
        v-model="item.value"
        class="item_input"
        placeholder="填写内容..."
        :auto-size="{ minRows: 1, maxRows: 1 }"
        @click.stop="clickInput"
        @blur="onBlur(item, index)"
      />
    </div>
  </title-container>
</template>

<script>
import TitleContainer from '@/components/titleContainer'
export default {
  name: 'Sort',
  components: {
    TitleContainer
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    index: {
      type: Number,
      default: 0
    },
    question: {
      type: Object,
      default: null
    },
    error: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      result: []
    }
  },
  created() {
    this.question.questionTag = this.question.questionTag || []
    this.question.requiredFlag = this.question.requiredFlag === undefined ? true : this.question.requiredFlag

    let tag = '排序题'
    const message = this.getMessage()
    if (message) {
      tag = `${tag}，${message}`
    }
    this.question.questionTag.unshift(tag)
    // console.log('created', this.excludeMap, tag)
  },
  methods: {
    clickInput() {},
    onChange(item, index) {
      // 超过多选限制时，不处理
      const result = this.getResult()
      const maxCount = this.question.questionMax || 0
      if (maxCount > 0 && result.length >= maxCount && !item.checked) {
        const message = this.getMessage()
        this.$emit('show-message', message)
        return false
      }
      item.checked = !item.checked

      if (item.checked) {
        this.result.push(index)
        item.sort = this.result.length
      }
      this.forceUpdate(item, index)
      this.excludeList(item, index)
      this.submit()
    },
    /** 取消选中元素时：
     * 1.将大于点击选项对应序号的元素数组遍历，依次对序号-1处理
     * 2.处理后的元素重新加入result数组
     */
    excludeList(item, index) {
      if (item.checked) return true
      const targetIndex = this.result.indexOf(index)
      const targetList = this.result.splice(targetIndex)
      // 跳过当前元素，从下一个选中的元素开始递减数字
      for (let i = 1; i < targetList.length; i++) {
        const idx = targetList[i]
        const child = this.question.questionContent[idx]
        child.sort--
        this.result.push(idx)
        this.forceUpdate(child, idx)
      }
    },

    getMessage() {
      const minCount = this.question.questionMin || 0
      const maxCount = this.question.questionMax || 0
      let tag = ''
      if (minCount > 0 && maxCount > 0) {
        tag = `请选择${minCount}-${maxCount}项`
      } else if (minCount > 0) {
        tag = `最少选择${minCount}项`
      } else if (maxCount > 0) {
        tag = `最多选择${maxCount}项`
      }
      return tag
    },

    getResult() {
      // 拼接选中的选项
      const result = []
      this.question.questionContent.forEach((item, idx) => {
        if (!item.checked) return false
        if (item.require && !item.value) return false
        result.push({ index: idx, content: item.content, value: item.value })
      })
      return result
    },
    onBlur(item, index) {
      this.submit()
    },
    submit() {
      const index = this.index
      // 拼接选中的选项
      const result = this.getResult()

      // 要求为必填时，必须选择一项
      if (this.question.requiredFlag && result.length === 0) {
        return false
      }
      const minCount = this.question.questionMin || 0
      if (minCount > 0 && result.length < minCount) {
        return false
      }
      const maxCount = this.question.questionMax || 0
      if (maxCount > 0 && result.length > maxCount) {
        return false
      }

      // 要求为必填时，必须选择一项
      if (this.question.requiredFlag && result.length === 0) {
        return false
      }
      const answer = {
        surveyId: this.question.surveyId,
        outId: this.question.outId,
        questionType: this.question.questionType,
        result: result
      }
      // console.log('暴露给父组件', answer, index)
      this.$emit('complete', answer, index)
    },
    forceUpdate(item, index) {
      this.$set(this.question.questionContent, index, item)
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.box {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: #e2e2e2;

}
.active{
  cursor: pointer;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 0px;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    background: #0095ff;
    color: #fff;
    text-align: center;
}
.item{
  cursor: pointer;
  // height: 20.9px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  .content{
    margin-left: 10px;
  }
}
.item_input {
  margin-top: 14px;
  display: block;
}
</style>
